<template>
  <div class="coupon">
    <ul class="order_nav" v-if="allCoupon=='me'">
      <li v-for="(item,index) of navBar" :key="index" @click="changeNav(index)" :class="{navBar_active:index==seletIndex}">{{item}}</li>
    </ul>
    <div class="coupon_list" v-for="(item,index) of couponList" :key="index">
      <div class="coupon_list_item">
        <div class="left_side">
          <div class="left_side_tit">{{item.name}}</div>
          <div class="left_side_des">{{item.desc}}</div>
          <div class="left_side_range">{{item.type=='direct'?'直接优惠': '满金额优惠'}}</div>
          <div class="left_side_limit">使用期限： {{item.start_time}} 至 {{item.end_time}}</div>
        </div>
        <div class="right_side">
          <!-- 去商城使用 -->
          <navigator url="/pages/mail/main" open-type="switchTab" v-if="allCoupon=='me' && type=='unused'">去使用</navigator>
          <div v-if="allCoupon=='me' && type=='expired'" class="coupon_recieved">已过期</div>
          <div v-if="allCoupon=='me' && type=='used'">已使用</div>
          <!-- 返回订单使用 -->
          <!-- <navigator url="/pages/mail/main" open-type="navigateBack" v-if="allCoupon=='order' && type=='unused'" delta="1">去使用</navigator> -->
          <div v-if="allCoupon=='order' && type=='unused'" @click="toOrder(item)">去使用</div>
          <div v-if="allCoupon=='home' && item.is_receive=='yes'" class="coupon_recieved">已领取</div>
          <div @click="getCoupon(item.id)" v-if="allCoupon=='home' && item.is_receive=='no'">领取</div>
        </div>
      </div>
    </div>
    <noContent v-if="couponList.length==0"></noContent>
  </div>
</template>

<script>

import noContent from '@/components/noContent';
import { setTimeout } from 'timers';
export default {
  data(){
    return{
      navBar:['未使用','已过期','已使用'],
      seletIndex:0,
      couponList:'',
      allCoupon:'',//home即来自首页的入口,order是商品选择时，me是我的优惠券
      type:'unused',
      req:''//商品选择时传来的参数
    }
  },
  components:{
    noContent
  },
  methods: {
    changeNav(index){
      this.seletIndex=index;
      switch(index){
        case 0: 
        this.getMyCouponList('unused');
        this.type='unused'
        break;
        case 1 :
         this.getMyCouponList('expired');
         this.type='expired'
        break;
        case 2 :
        this.getMyCouponList('used');
        this.type='used'
        break;
      }
    },
    sliceTime(val){
      let pattern=/\d*-\d*-\d*/
      let val1=val.map(item=>{
       item['start_time']= item['start_time'].match(pattern)[0];
       item['end_time']= item['end_time'].match(pattern)[0]
       return item
      })
      this.couponList=val1;
    },
    async getMyCouponList(type="unused"){//获取我的优惠券

      let userToken=wx.getStorageSync('userToken')
      let res=await this.$request.getData('/ucenter/getUserCoupon',{user_token:userToken,type})
      if(res.data.level=='success'){
        let res1=res.data.data;
        this.sliceTime(res1)
      }
    },
    async getShopCouponList(){
      let userToken=wx.getStorageSync('userToken')
      let res= await this.$request.getData('/ucenter/getCouponList',{user_token:userToken})
      if(res.data.level=='success'){
        let res1=res.data.data;
        this.sliceTime(res1)
      }
    },
    async getCoupon(id){
      let userToken=wx.getStorageSync('userToken')
      let res=await this.$request.postData('/ucenter/couponReceive',{coupon_id:id,user_token:userToken});
      if(res.data.level=='success'){
        this.$currency.showToast('领取成功','success');
        setTimeout(()=>{
          this.getShopCouponList()
        },500)
      }
    },
    async toOrder(data){
      this.req.coupon_id=data.coupon_id
       const res=await this.$request.postData('/order/useCoupon',this.req)
          if(res.data.level=='success'){//跟新商品金额
            this.$store.dispatch('setCoupon',{...res.data.data,...data});
            wx.navigateBack({delta:1})
          }else{
            this.$currency.showToast(res.data.message)
          }
      // this.$store.dispatch('setCoupon',data)
    },
  },
  onLoad(options){
    // console.log(options.type,11111)
    if(options.type=='allCoupon'){
      this.allCoupon='home';
      this.getShopCouponList()
    }else if(options.type=="order"){
      this.allCoupon='order';
      this.req=JSON.parse(options.params);
      console.log(this.req,'req')
      this.getMyCouponList()
    }else{
      this.allCoupon='me';
      this.getMyCouponList()
    }
  }
}
</script>

<style scoped lang="scss">
  .coupon{
    width: 100%;
    min-height: 100%;
    background: #eee;
  }
  .order_nav{
    width: 100%;
    height: 30px;
    background: #fff;
    display: flex;
    &>li{
      flex:1;
      text-align:center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
  .navBar_active{
    color:red;
  }
  .navBar_active::after{
    content:'';
    height: 2px;
    margin-top:5px;
    width:60px;
    background: red;
  }
  
  // 优惠券列
  .coupon_list{
    width: 100%;
    margin-top:15px;
    &_item{
      margin:5px;
      border-radius: 10px;
      background: rgb(55, 173, 55);
      color:#fff;
      display:flex;
      justify-content: space-between;
      align-items: center;
      height: 120px;
    }
    .left_side{
      margin-left:10px;
      &>div{
        margin-bottom: 5px;
        font-size: 14px;
      }
      &_tit{
        font-size: 18px!important;
      }
      
    }
    .right_side>navigator,.right_side>div{
      font-size: 14px;
      margin-right: 10px;
      padding:6px 15px;
      background: #fff;
      color:red;
      border-radius: 10px;
    }
  }
  .coupon_recieved{
    color:gray!important;
  }
</style>
